<template>
    <div class="agency-detail">
        <a-modal width="1300px" :visible="visible" title="活动链接" @cancel="closeModal" class="yuan-modal coupon-link-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '150px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel yuan-form-col5">
                        <div style="text-align:right;padding-bottom:10px">
                            <a-button @click="clickCopyLink" type="primary">复制活动链接</a-button>
                        </div>
                        <div class="form-panel-box">
                            <a-form-model-item label="活动图片" class="yuan-form-row" v-if="pageReady" prop="mustTips">
                                <UploadVue :uploadLength="1" @uploadChange="uploadChangeCoverImageUrl"
                                    :defImgList="formData.activityPicture?[formData.activityPicture]:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB，最多6张</div>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-row" label="活动名称" prop="activityName">
                                <a-input class="yuan-form-input" placeholder="请输入活动名称" v-model="formData.activityName"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="满减条件">
                                <span class="yuan-form-input">消费{{$toYuan(formData.minAmount || 0)}}元，优惠：{{$toYuan(formData.discountAmount || 0)}}元</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="使用规则" prop="usageDescription">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.usageDescription" placeholder="使用规则" :maxLength="500" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="活动介绍" prop="activityDescription">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.activityDescription" placeholder="活动介绍" :maxLength="500" />
                            </a-form-model-item>

                        </div>

                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">

                <a-button @click="modalOk" type="primary" :loading="saveLoading">
                    确认保存
                </a-button>
                <a-button @click="closeModal">
                    取消
                </a-button>

            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import marketApi from "@/api/marketApi";
import { getStorageUserInfo } from "@/utils";
@Component({
    name: "tpl",
    components: { UploadVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) info!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            if (this.info.name) {
                this.getLinkData();
                
            } else {
                this.formData = {};
                this.pageReady = true;
            }
        } else {
            this.pageReady = false;
        }
    }
    pageReady = false;
    saveLoading = false;
    formData: any = {};
    rules = {
        activityName: [{ required: true, message: "请输入活动标题", trigger: "change" }],
        usageDescription: [{ required: true, message: "请输入使用说明", trigger: "change" }],
        activityDescription: [{ required: true, message: "请输入活动介绍", trigger: "change" }],
    };
    async mounted() {}

    closeModal() {
        this.$emit("closeModal");
    }

    async modalOk() {
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) {
                this.$message.error("必填信息不完整，请检查后重试");
                return;
            }
            this.saveLoading = true;
            const res = await marketApi.saveAndGenerateActivityLink(this.formData);
            this.saveLoading = false;
            this.$message.success("保存成功");
            this.closeModal();
        });
    }
    uploadChangeCoverImageUrl(e) {
        this.formData.activityPicture = e.length ? e[0].url : "";
    }
    async getLinkData() {
        this.saveLoading = true;
        try {
            const res = await marketApi.previewActivityPage(this.info.id);
            if (res.data.activityName) {
                this.formData = { ...res.data };
            } else {
                let usageDescription = "互斥条件：" + (this.info.ifElseCouponShare === 0 ? "不与其他优惠共享" : "其他优惠共享");
                usageDescription += "\n可用时间段：";
                usageDescription += this.info.availableDaysJson.join("、");
                this.formData = {
                    couponId: this.info.id,
                    activityName: this.info.name,
                    minAmount: this.info.minAmount,
                    discountAmount: this.info.discountAmount,
                    usageDescription: usageDescription,
                };
            }

            this.pageReady = true;
        } finally {
            this.saveLoading = false;
        }
    }
    async clickCopyLink() {
        const userInfo = getStorageUserInfo();
        try {
            await navigator.clipboard.writeText(location.origin + "/#/couponLink?id=" + this.info.id+"&storeId="+userInfo.id);
            this.$message.success("复制成功");
        } catch (err) {
            this.$message.error("复制失败，请检查浏览器权限");
        }
    }
}
</script>
<style lang="scss">
.coupon-link-modal {
}
</style>
